<!--
 * @Author: 李明明
 * @Date: 2020-11-17 11:45:02
 * @LastEditTime: 2020-11-17 14:09:19
 * @LastEditors: 李明明
 * @Description: rss列表页
 * @FilePath: /官网改版/web/html/list/rss-list.html
 * @代码版权方：'政府采购信息网'
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  <meta name="description" content="描述">
  <meta name="keywords" content="关键词">
  <link rel="icon" href="">
  <link rel="shortcut icon" href="">
  <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_2052942_xzk2q3ix0w.css">-->
  <title>电梯采购网</title>
  <style type="text/less">
    @import "/web/public/public.less";
        .container{
            #main{
                .clearfix;
                width: 1024px;
                margin: 0 auto;
                position: relative;
                .title_wrap{
                  width: 900px;
                  margin: 0 auto;
                  .rss_title{
                    width: 100%;
                    text-align: center;
                    font-size: 24px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 24px;
                    letter-spacing: 1px;
                    color: #131313;
                    padding: 40px 0;
                    border-bottom: 2px solid;
                    border-image: linear-gradient(90deg, rgba(255,255,255,0.00) 0%,#e1e1e1 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
                    display: inline-block;
                  }
                }
                
                .left{
                    width: 680px;
                    min-height: 500px;
                    .fl;

                    .content-list{
                        &>li{
                            border-bottom: 1px solid #EEEEEE;
                            padding: 20px 0;
                            .clearfix;
                            .left{
                                width: 230px !important;
                                height: 140px !important;
                                min-height: 0 !important;
                                padding: 0 !important;
                                .fl;
                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                                &+.right{
                                    width: 435px !important;
                                    .fr;
                                }
                            }
                            .right{
                                min-height: 0 !important;
                                .title{
                                    width: 100%;
                                    font-size: 20px;
                                    .ellipsis;
                                }
                                p{
                                    height: 45px;
                                    color: #7f7f7f;
                                    font-size: 14px;
                                    line-height: 24px;
                                    margin-top: 15px;
                                    .ellipsis-mult(2);
                                }
                                .info{
                                    height: 27px;
                                    overflow: hidden;
                                    margin-top: 30px;
                                    font-size: 14px;
                                    color: #a8a8a8;
                                    .clearfix;
                                    line-height: 26px;
                                    i{
                                        margin-left: 20px;
                                        &:first-child{
                                            margin-left: 0;
                                        }
                                        &+span{
                                            margin-left: 5px;
                                        }
                                    }
                                    a{
                                        display: inline-block;
                                        color: #a8a8a8;
                                        background-color: #F0F0F0;
                                        border-radius: 13px;
                                        padding: 0 13px;
                                        .fr;
                                        margin-left: 10px;
                                        &:last-child{
                                            margin-left: 0;
                                        }
                                    }
                                }
                            }
                        }

                    }
                    .list-pagination{
                        margin-top: 20px;
                        text-align: center;
                        font-size: 18px;
                        font-weight: 400;
                        a,span.active{
                            display: inline-block;
                            width: 36px;
                            height: 36px;
                            line-height: 36px;
                            text-align: center;
                            color: #6e6e6e;
                            opacity: 0.99;
                            border-radius: 4px;
                            border: 1px solid #EBEBEB;
                            box-sizing:border-box;
                            margin-left: 8px;
                            vertical-align: middle;
                            &+a{
                                margin-left: 8px;
                            }

                            &.prev,&.next{
                                width: 70px;
                                font-size: 14px;
                            }
                            &.prev{
                                margin-left: 0;
                            }
                        }
                        span{
                            display: inline-block;
                            width: 30px;
                            &+a{
                                margin-left: 0;
                            }
                            &.active{
                                background: #F0F0F0;
                            }
                        }
                    }
                }
                &>.right{
                    width: 302px;
                    min-height: 500px;
                    .fr;
                }
            }
        }
    </style>

  <script src="/web/lib/less.min.js"></script>
  <script src="/web/lib/jquery-1.12.4.min.js"></script>
  <script src="/web/public/public.js"></script>
  <script src="/web/lib/jquery.pagination.js"></script>
</head>

<body>
  <div class="container">
    <!--这里引入header-->
    <include file="/web/html/header/header.htm" page-type="1"></include>
    <div id="main">
      <div class="title_wrap">
        <p class="rss_title">RSS页面</p>
      </div>
      <div class="left">
        <ul class="content-list"></ul>
        <div class="list-pagination"></div>
      </div>
      <div class="right">
        <!--            视频课堂-->
        <include file="/web/html/fragment/video-classroom.htm"></include><!-- 20201111-->
        <!--          亚利聊政采 -->
        <include file="/web/html/fragment/home-inc/yllzc.htm"></include><!-- 20201111-->
        <!--           热点专题 -->
        <include file="/web/html/fragment/home-inc/hot-topic.htm"></include><!-- 20201111-->
        <!--            热搜榜-->
        <include file="/web/html/fragment/index-hot-search.htm"></include><!-- 20201111-->
        <!-- 广告位(马老师不确定) -->
        <include file="/web/html/fragment/right-ad.htm"></include><!-- 20201111-->


      </div>
    </div>
    <include file="/web/html/footer/footer.htm"></include>
  </div>
  <script>
    var tagId = utils.getQueryVariable('id');
    $.ajax({
      url: ports.getTagListTdk,
      data: {
        keyword: tagId
      },
      success: function (res) {
        console.log('获取标签列表tdk', res);
        $("title").text(res.data.channelTitle + '-政府采购信息网' || '政府采购信息网');
        $("meta[name='keywords']").prop('content', res.data.channelKeyword || '');
        $("meta[name='description']").prop('content', res.data.channelDescriptions || '');
      }
    })
    function getTagList(pageNum, resetPage) {
      var pageSize = 10;
      $.ajax({
        url: ports.getTagList,
        data: {
          keyword: tagId,
          pageNum: pageNum,
          pageSize: pageSize
        },
        success: function (res) {
          console.log('获取标签列表', res);
          var tagListHtml = '';
          var tagList = res.data.list;
          tagList.forEach(function (item) {
            var keywordsListHtml = '';
            item.articleKeywords.forEach(function (item1) {
              keywordsListHtml += '<a href=' + '/web/html/list/tags-list.html?id=' + item1.value + ' class="tag">' + item1.label + '</a>'
            })
            tagListHtml += '<li>\n' +
              (item.articleImage ? '<div class="left"><img src=' + item.articleImage + ' alt=' + item.articleTitle + '></div>' : '')
              +
              '                    <div class="right">\n' +
              '                        <div class="title"><a target="_blank" href=' + item.articleUrl + '>' + item.articleTitle + '</a></div>\n' +
              '                        <p>\n' + item.articleInfo +
              '                        </p>\n' +
              '                        <div class="info">\n' +
              '                            <i class="iconfont icon-shijian"></i><span>' + item.createTime.substr(0, 10) + '</span>\n' +
              '\n'
              + keywordsListHtml +
              '                        </div>\n' +
              '                    </div>\n' +
              '                </li>'
          })
          $('ul.content-list').html(tagListHtml);
          if (resetPage) {
            $('.list-pagination').pagination({
              prevContent: '< 上一页',
              nextContent: '下一页 >',
              totalData: res.data.total,
              showData: pageSize,
              coping: true,
              callback: function (api) {
                console.log(api.getCurrent());
                var current = api.getCurrent();
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
                getTagList(current, false);
              }
            });
          }

        }
      });
    }

    getTagList(1, true);

  </script>
</body>

</html>